<!-- 商品详情重构页面 -->
<template>
    <view :style="{ '--color': color }">
        <view class="detailPage bgf8" :style="{ '--page-bot': mode ? '212rpx' : '120rpx' }" v-if="pageData">
            <!-- 返回、购物车 -->
            <view class="fcBtn d-flex a-center bgwhite" :style="{ top: menuButtonTop + 'px', opacity: 0.8 }">
                <view class="flex-1 flexac">
                    <text class="iconfont icon-shouyeT211 color_66 bold" v-if="fromShare == 1" @click="backHome()"></text>
                    <text class="iconfont icon-xiangzuo color_66" v-else @click="back()"></text>
                </view>
                <u-line direction="column" :hairline="false" length="16"></u-line>
                <view class="flex-1 flexac p-re" @click="toCart">
                    <text class="iconfont icon-gouwuche color_66 bold"></text>
                    <u-badge type="error" max="99" :value="cartNum" absolute :offset="[-8, -4]"></u-badge>
                </view>
            </view>
            <!-- 顶部导航 -->
            <view class="topNav bgwhite" :class="{ showTopNav: toTop, hideTopNav: !toTop && showed }">
                <view :style="{ height: totalHeight + 'px' }"></view>
                <u-tabs
                    :list="tabList"
                    :current="currentTab"
                    :lineColor="color"
                    lineWidth="28"
                    @click="tabClick"
                    :itemStyle="{ width: tabWidth, height: '88rpx' }"
                    :inactiveStyle="{ color: '#444', fontSize: '28rpx', transform: 'scale(1)' }"
                    :activeStyle="{ color: '#222', fontSize: '28rpx', fontWeight: 'bold', transform: 'scale(1.05)' }"
                ></u-tabs>
            </view>
            <!-- 轮播图 -->
            <view :style="{ height: pageData.photo_proportion * 750 + 'rpx' }">
                <u-swiper height="100%" :list="swiperList" keyName="url" :autoplay="false" radius="0" indicatorStyle="right: 40rpx" @change="(e) => (currentNum = e.current)" @click="previewImg">
                    <view slot="indicator" class="indicator-num p-top4 p-bot4 d-flex j-centert">
                        <text class="h6 white">{{ currentNum + 1 }} / {{ swiperList.length }}</text>
                    </view>
                </u-swiper>
            </view>
            <!-- 秒杀、团购活动倒计时 -->
            <view class="countDown d-flex j-sb a-center" v-if="pageData.goods_type != 0 && pageData.show_time == 1 && pageData.goods_state != 0">
                <view class="actName size38 white bold flexac t-letter4">{{ pageData.act_name }}</view>
                <view class="d-flex a-center">
                    <image :src="baseUrl + '/Uploads/diy/img/lightning.png'" mode="widthFix" style="width: 26rpx"></image>
                    <view class="m-left20">
                        <view class="stock size22 bold500 m-bot16">仅剩{{ pageData.stock ? pageData.stock : 0 }}{{ pageData.unit }}</view>
                        <view class="progress">
                            <u-line-progress :percentage="pageData.sale_percent" activeColor="#FE3C5E" inactiveColor="#FFBEBA" height="7" :showText="false"></u-line-progress>
                        </view>
                    </view>
                </view>
                <view class="p-right30">
                    <view class="text-center" v-if="pageData.goods_state == 1">
                        <view class="size28 white m-bot10">距离活动结束还剩</view>
                        <count-down txtColor="#fff" bg="#313131" fontSize="28" endTxt="本场" :time="parseInt(pageData.goods_end_time)"></count-down>
                    </view>
                    <view class="text-center" v-if="pageData.goods_state == 2">
                        <view class="size28 white m-bot10">距离活动开始还有</view>
                        <count-down txtColor="#fff" bg="#313131" fontSize="28" endTxt="本场" :time="parseInt(pageData.goods_start_time)"></count-down>
                    </view>
                </view>
            </view>
            <!-- 标题 -->
            <view class="padding20-40 bgwhite">
                <view class="profitTitle_ lines" v-if="pageData.profitTitle">
                    <text>{{ pageData.profitTitle }}</text>
                </view>
                <view class="d-flex j-sb a-center m-bot20" v-if="pageData.buy_config.state != 0">
                    <view class="d-flex a-center" v-if="pageData.goods_type == 2">
                        <view>
                            <text class="color_FOD size32 bold">￥</text>
                            <text class="color_FOD size40 bold">{{ pageData.goods_fopen_group_pricee }}</text>
                        </view>
                        <view class="color_66 size28 line-through m-left10" v-if="parseFloat(pageData.goods_fopen_group_pricee) < parseFloat(pageData.goods_price)">￥{{ pageData.goods_price }}</view>
                    </view>

                    <view class="d-flex a-center flex-1 f-wrap" v-else>
                        <view v-if="!currentSpecs.price">
                            <text class="color_FOD size32 bold">￥</text>
                            <!-- <text class="color_FOD size40 bold" v-if="parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice)">{{ pageData.minPrice }}</text> -->
                            <text class="color_FOD size40 bold" v-if="parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice)">{{ pageData.goods_price }}</text>
                            <text class="color_FOD size40 bold" v-else>{{ pageData.minPrice }}-{{ pageData.maxPrice }}</text>
                        </view>
                        <view v-else>
                            <text class="color_FOD size32 bold">￥</text>
                            <text class="color_FOD size40 bold">{{ currentSpecs.price }}</text>
                        </view>
                        <!--  <view class="bgFD8 bor_radius_40 padding4-20 m-left10" v-if="pageData.memberprice && parseFloat(pageData.memberprice) < parseFloat(pageData.minPrice)">
                            <text class="color_FOD size28">折后价</text>
                            <text class="color_FOD size28 bold">￥</text>
                            <text class="color_FOD size36 bold">{{ currentSpecs.price ? currentSpecs.price : pageData.memberprice }}</text>
                        </view> -->
                        <view
                            v-if="
                                parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice) &&
                                parseFloat(pageData.memberprice) == parseFloat(pageData.minPrice) &&
                                parseFloat(pageData.minPrice) < parseFloat(pageData.goods_full_price)
                            "
                            class="color_66 size28 line-through m-left10"
                        >
                            ￥{{ pageData.goods_full_price }}
                        </view>
                        <view class="h6 color_66 m-left20" v-if="pageData.goods_sales_number != 0">已售{{ pageData.goods_sales_number }}</view>
                    </view>
                    <!-- 分享 -->
                    <view class="d-flex f-column a-center" @click="handleShare">
                        <text class="iconfont icon-fenxiang1 color_66 size36"></text>
                        <text class="size22 color_66">分享</text>
                    </view>
                </view>

                <view class="row m-top14" v-if="pageData.next_level">
                    <view class="dd-inline-block3 h7 bgEA padding10-20 bor_radius_30">{{ pageData.next_level }}</view>
                </view>
                <view class="color_22 size32 bold line50">{{ currentSpecs.specs_title ? currentSpecs.specs_title : pageData.goods_name }}</view>
                <view class="d-flex a-center">
                    <view class="flex-1">
                        <view class="color_77 h6 bold400 line40 m-top20" v-if="pageData.goods_info && mode == 0">
                            {{ pageData.goods_info }}
                        </view>
                    </view>
                    <view class="test m-top20" @click="testSample" v-if="pageData.recommend">试样</view>
                </view>
                <view class="color_FOD size26 m-top16 bold" v-if="pageData.expire_at">有效期：{{ pageData.expire_at }}</view>

                <!-- 选择规格(餐饮)  pageData.getGoodsSpecs && mode == 1-->

                <view class="m-top40" v-if="pageData.getGoodsSpecs && pageData.getGoodsSpecs.specsList">
                    <image
                        class="currentSpecsimg m-right20 f-shrink-0"
                        :src="currentSpecs.img ? $imgUrls(currentSpecs.img) : $imgUrls(pageData.goods_img)"
                        mode="aspectFill"
                        @click="$common.previewSingle(currentSpecs.img || pageData.goods_img)"
                    ></image>
                    <view class="d-flex f-column" v-for="(item, index) in specsList" :key="index">
                        <view class="size26 color_77 m-right40 m-bot20 line54">{{ item.title }}</view>
                        <view class="d-flex f-wrap flex-1">
                            <view
                                class="specsTag text-center color_66 bor_radius_6 m-right20 m-bot20"
                                @click="handleSpecs(index, itm.state, itm.specs_id)"
                                :class="{ active: specs_ids[index] == itm.specs_id, color_cc: !itm.state }"
                                v-for="(itm, idx) in item.list"
                                :key="idx"
                                v-show="item.list"
                            >
                                {{ itm.title }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 品牌 -->
            <goodsBrand :pageData="pageData.goodsBrand" v-if="pageData.goodsBrand"></goodsBrand>

            <!-- 选择规格(电商) -->
            <!-- 	<view class="padding20" v-if="mode == 0">
				<view class="card padding20 bgwhite bor_radius_8">
					<view class="d-flex j-sb m-bot30" @click="showPopup = true; specsFlag = 1" v-if="specsList.length">
						<view>
							<text class="h6 color_77 bold500 m-right34">选择</text>
							<text class="h6 color_22 bold400">{{ specs_title ? specs_title : '产品规格' }}</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
					<view class="d-flex j-sb a-center m-bot30" @click="toUrl(`/orderPage/Addresslist/Addresslist`)">
						<view class="d-flex">
							<text class="h6 color_77 bold500 m-right34">配送</text>
							<view class="h6 color_22 bold400 ellipsis flex-1" v-if="addr">至{{ addr }}</view>
							<text class="h6 color_22 bold400" v-else>请选择</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
					<view class="d-flex j-sb" @click="showFreDesc = true">
						<view>
							<text class="h6 color_77 bold500 m-right34">运费</text>
							<text class="h6 color_22 bold400">{{ freight }}</text>
						</view>
						<text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
					</view>
				</view>
			</view> -->

            <!-- 推荐(点餐) -->
            <view class="package padding20" v-if="likeList.length && mode == 1">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view
                        class="item bgf8 d-flex bor_radius_10"
                        v-for="(item, index) in likeListCom"
                        :key="index"
                        :class="{ 'm-bot20': index != likeListCom.length - 1 }"
                        @click="toUrl(`/pages/goods/goods_detail?goodsid=${item.goods_id}&mode=1&scan=${scan}&tid=${tid}`)"
                    >
                        <view class="p-left20 p-top20 p-bot20">
                            <image class="img bor_radius_6" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                        </view>
                        <view class="d-flex f-column j-sb padding30 flex-1">
                            <view class="size26 color_22 bold500 ellipsis_2">{{ item.name }}</view>
                            <view class="d-flex j-sb">
                                <view class="size30 color_F4 bold">￥{{ item.price }}</view>
                                <text class="iconfont icon-zengjia size42 color_ff4"></text>
                            </view>
                        </view>
                    </view>
                    <view class="m-top20 d-flex f-column a-center" @click="isFold = !isFold" v-if="likeList.length > 4">
                        <text class="h6 color_77 bold400 m-bot10">{{ isFold ? '展开全部' : '收起' }}</text>
                        <text class="iconfont icon-xiangxia h6 color_77" v-if="isFold"></text>
                        <text class="iconfont icon-xiangshang h6 color_77" v-else></text>
                    </view>
                </view>
            </view>
            <!-- 去参团 -->
            <view v-if="pageData.goods_type == 2 && pageData.groupData">
                <Join :groupData="pageData.groupData"></Join>
            </view>
            <!-- 评价 -->
            <view id="evaluate" v-if="pageData.buy_config.state == 0" class="evaluate bgwhite padding30-40 m-top20" :class="{ 'm-top20': !likeList.length && mode == 1 }">
                <view class="d-flex j-sb m-bot40">
                    <view class="size32 color_22 bold">{{ nameDefinition.goodsName || '宝贝' }}评价({{ commentData.count ? commentData.count.allcount : '0' }})</view>
                    <view @click="toUrl('/commentPage/comment/commentList?gid=' + goods_id)">
                        <text class="h6 color_F4 m-right10">好评{{ pageData.goods_favorable ? pageData.goods_favorable : '0' }}%</text>
                        <text class="iconfont icon-xiangyouxiayiye h6 color_99"></text>
                    </view>
                </view>
                <view class="m-bot30 d-flex f-wrap" v-if="commentData.comment_labels && commentData.comment_labels.length">
                    <view
                        class="label m-right30 m-bot10 h6 color_44"
                        v-for="(item, index) in commentData.comment_labels"
                        :key="index"
                        @click="toUrl('/commentPage/comment/commentList?gid=' + goods_id + '&label=' + item.id)"
                    >
                        {{ item.title }}({{ item.num }})
                    </view>
                </view>
                <swiper class="cont" next-margin="150rpx" v-if="commentData.data && commentData.data.length">
                    <swiper-item v-for="(item, index) in commentData.data" :key="index" @click="toUrl('/commentPage/comment/commentList?gid=' + goods_id + '&comment_id=' + item.comment_id)">
                        <view class="item bgFA bor_radius_8 d-flex j-sb">
                            <view class="flex-1 padding20">
                                <view class="d-flex a-center m-bot20">
                                    <u-avatar :src="$imgUrls(item.v_headimg)" size="30"></u-avatar>
                                    <view class="size22 color_66 bold500 m-left10 ellipsis" v-if="item.v_name">
                                        {{ item.v_name }}
                                    </view>
                                </view>
                                <view class="size22 color_44 ellipsis_3 line34">{{ item.comment_word }}</view>
                            </view>
                            <image class="img" v-if="item.comment_pic && item.comment_pic[0]" :src="$imgUrls(item.comment_pic[0])" mode="aspectFill"></image>
                        </view>
                    </swiper-item>
                </swiper>
                <view v-else class="color_66 text-center m-top30">该{{ nameDefinition.goodsName || '宝贝' }}还没有任何评价</view>
            </view>

            <!-- 店铺 -->
            <view class="rows bgwhite detailStore m-top20" v-if="pageData.buy_config.state == 0">
                <Store :pageData="pageData" :scan="scan" :shop_id="shop_id" showType="1"></Store>
            </view>

            <!-- 详情 -->
            <view id="details" :class="{ 'm-top20': pageData.buy_config.state != 0 }" class="bgwhite" v-if="pageData.goods_content">
                <view class="size32 color_22 bold padding30-40 m-bot10">{{ nameDefinition.goodsName || '宝贝' }}详情</view>
                <u-parse :content="pageData.goods_content" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true" @ready="parseDone"></u-parse>
            </view>

            <!-- 课程目录 -->
            <catalogue id="catalogue" :chapter_list="pageData.chapter_list" :goods_id="goods_id" v-if="pageData.goods_cate == 1" @Unlock="(screening = true), (slidetop = true)"></catalogue>

            <!-- 推荐(电商) -->
            <view id="recommend" class="recommend bgwhite padding30-40 m-top20" v-if="likeList.length && mode == 0">
                <view class="size32 color_22 bold m-bot40">{{ nameDefinition.goodsName || '宝贝' }}推荐</view>
                <view class="d-flex f-wrap">
                    <view class="item d-flex f-column" v-for="(item, index) in likeList" :key="index" @click="toGoods(item.goods_id, item.store_id)">
                        <image class="img" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                        <view class="d-flex f-column j-sb p-top10 p-bot10 flex-1">
                            <view class="size22 color_22 bold500 ellipsis_2">{{ item.name }}</view>
                            <view class="profitTitle_ lines" v-if="item.profitTitle">
                                <text>{{ item.profitTitle }}</text>
                            </view>
                            <view class="size26 color_F4 bold">￥{{ item.price }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="rows p-bot120">
                <contact></contact>
            </view>
            <!-- 底部导航(电商) p-top20 d-flex j-sb a-center-->
            <view class="common_footer bgwhite" v-if="mode == 0">
                <view class="row j-sb padding15-30">
                    <view class="d-flex a-end">
                        <view class="color_ff4 bold">
                            <text class="size26">￥</text>
                            <text class="size32">{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
                        </view>
                        <!-- <view class="color_66 size26 line-through m-left10">￥{{ pageData.goods_full_price }}</view> -->
                    </view>
                    <u-number-box v-model="v_input" integer :min="min_num" :max="maxNum" :step="step_num" @overlimit="overlimit">
                        <view slot="minus"><text class="iconfont icon-jianshao1 size42 color_ff4"></text></view>
                        <view slot="input">
                            <view class="size28 color_33 bold text-center" style="width: 60rpx">{{ v_input }}</view>
                        </view>
                        <view slot="plus"><text class="iconfont icon-zengjia size42 color_ff4"></text></view>
                    </u-number-box>
                </view>
                <view class="rows d-flex a-center p-top20">
                    <view class="list d-flex a-center">
                        <view
                            class="flex-1 text-center color_66"
                            v-if="pageData.buy_config.state == 0 && pageData.store_id != 0"
                            @click="toUrl('/pages/store/storeIndex?shop_id=' + pageData.store_id)"
                        >
                            <text class="iconfont icon-store size36 m-bot6" :style="{ color }"></text>
                            <view>{{ nameDefinition.storeDefinitionName || '店铺' }}</view>
                        </view>
                        <view class="flex-1 text-center color_66" v-else @click="backHome">
                            <text class="iconfont icon-withdraw size36 m-bot6"></text>
                            <view>返回首页</view>
                        </view>
                        <view class="flex-1 p-re">
                            <view class="text-center color_66" @click="contact">
                                <text class="iconfont icon-conversation_icon size36 m-bot6"></text>
                                <view>客服</view>
                            </view>
                            <!-- #ifdef MP-WEIXIN -->
                            <button open-type="contact" class="btn-contact" v-if="startUp.service_state != 1"></button>
                            <!-- #endif -->
                        </view>
                        <!-- 收藏 -->
                        <view class="flex-1 text-center color_66" @click="handleCollect">
                            <text class="iconfont icon-01 size36 m-bot6" :style="{ color }" v-if="pageData.goods_collect"></text>
                            <text class="iconfont icon-02 size36 m-bot6" v-else></text>
                            <view>{{ pageData.goods_collect ? '已收藏' : '收藏' }}</view>
                        </view>
                    </view>

                    <view v-if="pageData.state == 0" class="loneBtn m-left20 m-right20 size28 white text-center bgAF">{{ nameDefinition.goodsName || '宝贝' }}已下架</view>

                    <!-- 上架中 -->
                    <view v-else>
                        <!-- 团购 -->
                        <view v-if="pageData.goods_type == 2" class="groupBtn m-left20 m-right20 white d-flex">
                            <view class="left flex-1 text-center bgFFA p-top4 p-bot4" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0" @click="clickBtn(1)">
                                <view class="size28">
                                    {{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
                                </view>
                                <view>￥{{ pageData.goods_price }}</view>
                            </view>
                            <view class="right flex-1 text-center bgFF4B p-top4 p-bot4" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0" @click="clickBtn(2)">
                                <view class="size28">
                                    {{ pageData.goods_open_group_price_name ? pageData.goods_open_group_price_name : '一键开团' }}
                                </view>
                                <view>￥{{ pageData.goods_fopen_group_pricee }}</view>
                            </view>
                        </view>
                        <!-- 普通0/特价1 -->
                        <view v-else class="groupBtn m-left20 m-right20 white">
                            <view class="d-flex" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0">
                                <!-- join_cart：是否允许添加购物车 1允许 2拒绝 -->
                                <!-- is_id_number：是否需要输入身份证 1需要 2无需 -->
                                <view class="left flex-1 bgFFA flexac size28" v-if="pageData.join_cart != 2 && pageData.is_id_number != 1" @click="clickBtn(3)">加入{{ cartName }}</view>
                                <view class="right flex-1 text-center bgFF4B p-top4 p-bot4" :class="{ bor_radius_68: pageData.join_cart == 2 || pageData.is_id_number == 1 }" @click="clickBtn(1)">
                                    <view class="size28">
                                        {{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
                                    </view>
                                    <view>￥{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</view>
                                </view>
                            </view>
                        </view>
                        <!-- 活动未开始 -->
                        <view v-if="pageData.goods_state == 2 && pageData.show_time == 1" class="loneBtn m-left20 m-right20 size28 white text-center bgFFA">活动未开始</view>
                        <!-- 活动已结束 -->
                        <view v-if="pageData.goods_state == 0 && pageData.show_time == 1" class="loneBtn m-left20 m-right20 size28 white text-center bgAF">活动已结束</view>
                    </view>

                    <!-- <template v-if="pageData.buy_config.state == 0">
					<view class="loneBtn m-left20 m-right20 size28 white text-center bgcolor" @click="$common.Tel(pageData.buy_config.tel)">
						{{ pageData.buy_config.btn_text }}
					</view>
				</template> -->
                </view>
            </view>

            <!-- 底部导航(点餐) v-if="mode == 1"-->
            <view class="order_footer bgwhite d-flex f-column p-top20" v-if="mode == 1">
                <view class="row j-sb padding15-30">
                    <view class="d-flex a-end">
                        <view class="color_ff4 bold">
                            <text class="size26">￥</text>
                            <text class="size32">{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
                        </view>
                        <view class="color_66 size26 line-through m-left10">￥{{ pageData.goods_full_price }}</view>
                    </view>
                    <u-number-box v-model="v_input" integer :min="min_num" :max="maxNum" :step="step_num" @overlimit="overlimit">
                        <view slot="minus"><text class="iconfont icon-jianshao1 size42 color_ff4"></text></view>
                        <view slot="input">
                            <view class="size28 color_33 bold text-center" style="width: 60rpx">{{ v_input }}</view>
                        </view>
                        <view slot="plus"><text class="iconfont icon-zengjia size42 color_ff4"></text></view>
                    </u-number-box>
                </view>
                <view class="row j-se padding15-30 white">
                    <view class="btn flexac bgFFA size28" @click="clickBtn(3)">加入{{ cartName }}</view>
                    <view class="btn flexac bgFF4B size28" @click="clickBtn(1)" v-if="scan == 0">
                        {{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
                    </view>
                </view>
            </view>
            <!-- 规格弹框(电商) -->
            <u-popup :show="showPopup" @close="showPopup = false">
                <Store :pageData="pageData" :scan="scan" :shop_id="shop_id" showType="2" v-if="pageData.buy_config.state == 0"></Store>
                <view class="specsPop padding30">
                    <view class="d-flex">
                        <image
                            class="img bor_radius_4 m-right20 f-shrink-0"
                            :src="currentSpecs.img ? $imgUrls(currentSpecs.img) : $imgUrls(pageData.goods_img)"
                            mode="aspectFill"
                            @click="$common.previewSingle(currentSpecs.img || pageData.goods_img)"
                        ></image>
                        <view class="d-flex f-column j-sb">
                            <view class="p-right40">
                                <text v-if="clickBtnType == 2" style="vertical-align: top" class="d-inline-block white bgFF4B line40 p-left20 p-right20 bor_radius_40 m-right4">
                                    {{ pageData.goods_group_number }}人团
                                </text>
                                <text class="size28">{{ pageData.goods_name }}</text>
                            </view>
                            <view>
                                <text class="color_FOD size32 bold">￥</text>
                                <text class="color_FOD size40 bold" v-if="pageData.goods_type == 2 && clickBtnType == 2">{{ pageData.goods_fopen_group_pricee }}</text>
                                <text class="color_FOD size40 bold" v-else>{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="scroll-y" style="max-height: 40vh" v-if="pageData.getGoodsSpecs">
                        <view v-for="(item, index) in specsList" :key="index">
                            <view class="size28 color_33 bold m-top30 m-bot20">{{ item.title }}</view>
                            <view>
                                <view
                                    class="specsItm d-inline-block color_66 bor_radius_30s m-right20 m-bot20"
                                    v-show="item.list"
                                    v-for="(itm, idx) in item.list"
                                    :key="idx"
                                    @click="handleSpecs(index, itm.state, itm.specs_id)"
                                    :class="{ active: specs_ids[index] == itm.specs_id, color_cc: !itm.state }"
                                >
                                    {{ itm.title }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="d-flex j-sb a-center">
                        <view class="size28 color_33 bold m-top30 m-bot40">数量</view>
                        <view><u-number-box v-model="v_input" integer :min="min_num" :max="maxNum" :step="step_num" @overlimit="overlimit"></u-number-box></view>
                    </view>

                    <template v-if="pageData.buy_config.state == 0">
                        <view v-if="specsFlag == 2" class="confirmBtn bgFF4B size30 white bold text-center" @click="$common.Tel(pageData.buy_config.tel)">{{ pageData.buy_config.btn_text }}</view>
                    </template>

                    <block v-else>
                        <view v-if="specsFlag == 2" class="confirmBtn bgFF4B size30 white bold text-center" @click="handleSubmit">确定</view>
                        <view v-if="specsFlag == 1" class="row j-sb white">
                            <view class="btn flexac bgFFA size28" @click="clickBtn(3, true)">加入{{ cartName }}</view>
                            <view class="btn flexac bgFF4B size28" @click="clickBtn(1, true)">
                                {{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}
                            </view>
                        </view>
                    </block>
                </view>
            </u-popup>
            <!-- 运费说明 -->
            <u-popup :show="showFreDesc" closeable @close="showFreDesc = false">
                <view class="padding30" style="min-height: 300rpx">
                    <view class="size32 color_22 bold m-bot30">运费说明</view>
                    <u-parse :content="freDesc" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true"></u-parse>
                </view>
            </u-popup>

            <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
            <SharePoster v-if="showShareQr" :myid="goods_id" type="2" :pageType="'10&gid=' + goods_id" @closePoster="showShareQr = false"></SharePoster>
            <showModeldetail
                v-if="showModal2"
                @cancelFunc="showModal2 = false"
                :title="modalInfo.title"
                :msg="modalInfo.msg"
                :btn1="modalInfo.btn1"
                :btn2="modalInfo.btn2"
                :btn1_url="modalInfo.btn1_url"
                :btn2_url="modalInfo.btn2_url"
                :jump="modalInfo.jump"
                type="99"
            ></showModeldetail>
        </view>

        <!-- 首屏显示色块 -->
        <view class="bgf8" v-if="!pageData">
            <view style="height: 750rpx"></view>
            <view class="padding20-40 bgwhite">
                <view class="bgf8 m-bot20 bor_radius_10" style="width: 140rpx; height: 60rpx"></view>
                <view class="bgf8 bor_radius_10" style="height: 50rpx"></view>
                <view class="bgf8 m-top20 bor_radius_10" style="height: 40rpx"></view>
            </view>
            <view class="padding20" v-if="mode == 0">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="bgf8 bor_radius_10" style="height: 32rpx" v-for="item in 3" :key="item" :class="{ 'm-bot30': item < 2 }"></view>
                </view>
            </view>
            <view class="package padding20" v-if="mode == 1">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="item bgf8 bor_radius_10" v-for="item in 4" :key="item" :class="{ 'm-bot20': item < 3 }"></view>
                </view>
            </view>
            <view class="bgwhite padding30-40" style="height: 400rpx">
                <view class="bgf8 bor_radius_10" style="width: 160rpx; height: 40rpx"></view>
            </view>
            <view class="common_footer bgwhite p-top20 d-flex j-sb a-center" v-if="mode == 0">
                <view class="list d-flex j-sa a-center">
                    <view class="bgf8 bor_radius_10" style="width: 40rpx; height: 60rpx" v-for="item in 3" :key="item"></view>
                </view>
                <view class="groupBtn bgf8 m-left20 m-right20 bor_radius_30" style="height: 70rpx"></view>
            </view>
            <view class="order_footer bgwhite p-top20" v-if="mode == 1">
                <view class="row j-sb padding15-30">
                    <view class="bgf8 bor_radius_10" v-for="item in 2" :key="item" style="width: 160rpx; height: 40rpx"></view>
                </view>
                <view class="row j-se padding15-30">
                    <view class="btn bgf8" v-for="item in 2" :key="item"></view>
                </view>
            </view>
        </view>

        <specsPopup :showPopup="showSpecsPop" :pageData="info" @close="showSpecsPop = false" />
    </view>
</template>

<script>
    import SharePoster from '@/components/sharePoster.vue';
    import Join from '@/components/Join.vue';
    import catalogue from '@/components/answer/catalogue.vue';
    import Store from '@/components/details/Store.vue';
    import goodsBrand from '@/components/details/goodsBrand.vue';
    import specsPopup from '@/components/specsPopup.vue';
    import { mapState, mapMutations } from 'vuex';
    export default {
        components: {
            SharePoster,
            Join,
            catalogue,
            Store,
            goodsBrand,
            specsPopup
        },
        data() {
            return {
                staticUrl: this.staticUrl,
                baseUrl: this.baseUrl,
                imgUrl: this.imgUrl,
                menuButtonTop: getApp().globalData.menuButtonObject.top, // 胶囊按钮的top值
                goods_id: '',
                shop_id: '',
                mode: 0, // 默认电商、1是点餐
                tabList: [
                    {
                        name: '宝贝'
                    },
                    {
                        name: '评价'
                    },
                    {
                        name: '详情'
                    }
                ],
                currentTab: 0,
                pageData: '', // 详情
                swiperList: [],
                currentNum: 0,
                likeList: [],
                isFold: true,
                commentData: {},
                cartNum: 0,
                addr: '',
                freight: '',
                freDesc: '',
                showFreDesc: false,
                toTop: false,
                view1Top: 0,
                view2Top: 0,
                view3Top: 0,
                v_input: 1, // 计数器

                showPopup: false,
                clickBtnType: 1, // 点击"立即购买"为1、"一键开团"为2、"加入购物车"为3
                specsList: [], // 规格列表
                specsCopy: '', // 原始数据字符串
                specsFlag: 1, // 点击"选择"显示规格弹框为1、点击底部为2
                specs_ids: [],
                currentSpecs: {},
                specs_title: '',
                stock: '', // 当前规格组合的库存或总库存

                fromShare: 0,
                showModal: false,
                showShareQr: false,
                showModal2: false,
                modalInfo: {
                    title: '温馨提示',
                    msg: '当前您的信息不完整',
                    btn1: '稍后完善',
                    btn2: '去完善',
                    btn1_url: '',
                    btn2_url: '',
                    jump: ''
                },
                showed: false, // 避免首次加载页面执行"fade-out"动画
                scan: 0, // 是否来自扫码点餐
                tid: '', // 桌号id
                isHome: 0,
                showSpecsPop: false,
                info: '',
                min_num: 1,
                step_num: 1
            };
        },
        computed: {
            ...mapState(['nameDefinition', 'color', 'totalHeight', 'vid', 'startUp', 'cartName', 'bid']),
            likeListCom() {
                return this.likeList.filter((item, index) => index < 4 || !this.isFold);
            },
            tabWidth() {
                return this.tabList.length == 4 ? '25%' : '33.33%';
            },
            maxNum() {
                let max = this.pageData.buy_config?.max_num || this.stock;
                return max > parseFloat(this.stock) ? this.stock : max;
            }
        },

        onLoad(e) {
            let that = this;
            if (e.goodsid) that.goods_id = e.goodsid;
            if (e.goods_id) that.goods_id = e.goods_id;
            if (e.mode) that.mode = e.mode;
            if (e.fromShare) that.fromShare = e.fromShare;
            if (e.scan) that.scan = e.scan;
            if (e.tid) that.tid = e.tid;
            if (e.shop_id) that.shop_id = e.shop_id;
            if (e.share_v_id) uni.setStorageSync('share_v_id', e.share_v_id);
            if (e.isHome) that.isHome = e.isHome;
            if (e.bid)
                that.getUser({
                    bid: e.bid
                });
            that.getCart();
            that.getPageData();
            setTimeout(() => {
                that.getViewTop('#evaluate').then((res) => {
                    that.view1Top = res;
                });
                that.getViewTop('#details').then((res) => {
                    that.view2Top = res;
                });
                that.getViewTop('#recommend').then((res) => {
                    that.view3Top = res;
                });
            }, 1000);
        },
        onShow() {
            let that = this;
            that.getOldAddress();
        },
        methods: {
            ...mapMutations(['getUser']),
            getPageData() {
                // 页面初始化数据
                let that = this;
                that.$http
                    .post({
                        url: '/singleSaleApi/singleDetails',
                        data: {
                            goods_id: that.goods_id,
                            shop_id: that.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return that.$Toast(res.msg);
                        const result = res.data;
                        that.pageData = result;
                        that.min_num = that.pageData.buy_config.min_num;
                        that.step_num = that.pageData.buy_config.step_num;
                        that.v_input = that.min_num;
                        if (result.store_id && !result.shops) uni.setStorageSync('shop_id', result.store_id);

                        that.stock = that.pageData.stock || '0';
                        // 轮播图
                        that.swiperList = that.pageData.goods_photo?.map((item) => ({
                            url: item ? that.$imgUrls(item) : that.staticUrl + '/images/imageLoading.png',
                            type: 'image'
                        }));
                        if (that.pageData.goods_video) {
                            that.swiperList.unshift({
                                url: that.pageData.goods_video,
                                type: 'video'
                            });
                        }
                        // 规格
                        let { specsList, specsPrice } = that.pageData.getGoodsSpecs;
                        if (specsList && specsPrice) {
                            that.specsList = specsList;
                            that.specsCopy = JSON.stringify(that.specsList);
                            let first = specsPrice.find((item) => item.stock && item.stock != 0); // 接口返回的specs_ids默认从小到大排序
                            if (first) {
                                specsList.forEach((item, index) => {
                                    // 强制按照规格类别排序且个数一致
                                    let obj = item.list.find((itm) => first.specs_ids.includes(itm.specs_id));
                                    that.specs_ids[index] = obj ? obj.specs_id : '';
                                });
                                that.stock = first.stock;
                                that.currentSpecs = first;
                            }
                        }
                        // 去参团-头像组
                        if (that.pageData.groupData && that.pageData.goods_type == 2) {
                            that.pageData.groupData.forEach((item) => {
                                item.groupUsers = item.groupUsers.map((itm) => ({
                                    v_headimg: that.$imgUrls(itm.v_headimg)
                                }));
                            });
                        }
                        that.getLikes();
                        that.getComment();
                    });
            },
            testSample() {
                if (!this.vid) return (this.showModal = true);
                this.info = this.pageData.recommend[0];
                this.showSpecsPop = true;
            },
            getLikes() {
                // 推荐
                let that = this;
                that.$http
                    .post({
                        url: '/singleSaleApi/guessLikeGoods',
                        data: {
                            goods_id: that.goods_id,
                            shop_id: that.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.data && res.data.length) {
                            that.likeList = res.data;
                            if (that.mode) return;
                            that.tabList.push({
                                name: '推荐'
                            });
                        }
                    });
            },
            getComment() {
                // 评论
                let that = this;
                that.$http
                    .get({
                        url: '/singleSaleApi/get_comment',
                        data: {
                            goods_id: that.goods_id,
                            shop_id: that.shop_id,
                            page: 1,
                            pageNum: 6
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100) {
                            that.commentData = res;
                        }
                    });
            },
            getCart() {
                // 获取购物车数据
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/cartList',
                        data: {
                            shop_id: that.shop_id
                        }
                    })
                    .then((res) => {
                        if (!res.data) return;
                        that.cartNum = res.cartNum;
                    });
            },
            getOldAddress() {
                let that = this;
                that.$http
                    .get({
                        url: '/SRA_simMallApi/getOldAddress',
                        data: {
                            type: 3
                        }
                    })
                    .then((res) => {
                        if (res.code == 100 && res.data && res.data.Aaddress) {
                            that.addr = res.data.Aregion + res.data.Aaddress;
                            that.getFreight();
                        }
                    });
            },
            getFreight() {
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/getGoodsFreight',
                        data: {
                            goods_id: that.goods_id,
                            address: that.addr
                        }
                    })
                    .then((res) => {
                        if (res.code == 200 && res.data) {
                            that.freight = res.data.title;
                            that.freDesc = res.data.content;
                        }
                    });
            },
            toCart() {
                let that = this;
                if (!that.vid) return (that.showModal = true);
                if (that.mode == 0) {
                    that.$pop.toTab(7);
                } else {
                    if (that.scan == 1) return that.toUrl('/otherPage/custom/placeOrder?tid=' + that.tid);
                    that.$pop.toTab(4);
                }
            },
            previewImg(index) {
                // 预览图片
                let that = this;
                if (that.swiperList[index].type != 'image') return;
                let urls = [];
                that.swiperList.forEach((item) => {
                    if (item.type == 'image') {
                        urls.push(item.url);
                    }
                });
                uni.previewImage({
                    current: that.swiperList[index].url,
                    urls,
                    indicator: 'number'
                });
            },
            getViewTop(id) {
                let that = this;
                // 查询节点到顶部距离
                const query = uni.createSelectorQuery().in(this);
                const allTop = that.totalHeight + 44;
                return new Promise((resolve) => {
                    query
                        .select(id)
                        .boundingClientRect((data) => {
                            if (data) {
                                resolve(data.top - allTop);
                            } else {
                                resolve(0);
                            }
                        })
                        .exec();
                });
            },
            parseDone() {
                let that = this;
                that.getViewTop('#recommend').then((res) => {
                    that.view3Top = res;
                });
            },
            tabClick({ index }) {
                let that = this;
                if (index == 0) {
                    // 宝贝
                    uni.pageScrollTo({
                        scrollTop: 0,
                        duration: 100
                    }); // 将页面滚动到目标位置
                } else if (index == 1) {
                    // 评价
                    uni.pageScrollTo({
                        scrollTop: that.view1Top,
                        duration: 100
                    });
                } else if (index == 2) {
                    // 详情
                    uni.pageScrollTo({
                        scrollTop: that.view2Top,
                        duration: 100
                    });
                } else if (index == 3) {
                    // 推荐
                    uni.pageScrollTo({
                        scrollTop: that.view3Top,
                        duration: 100
                    });
                }
            },
            handleCollect() {
                // 收藏
                let that = this;
                if (!that.vid) return (that.showModal = true);
                that.$http
                    .post({
                        url: '/singleSaleApi/goods_collect',
                        data: {
                            goods_id: that.goods_id,
                            shop_id: that.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return that.$Toast(res.msg);
                        that.pageData.goods_collect = that.pageData.goods_collect ? 0 : 1;
                    });
            },
            handleShare() {
                // 分享海报
                let that = this;
                if (!that.vid) return (that.showModal = true);
                that.showShareQr = true;
            },
            contact() {
                // 客服
                let that = this;
                if (!that.vid) return (that.showModal = true);
                if (that.startUp.service_state == 1) {
                    // 客服系统
                    uni.navigateTo({
                        url: '/userPage/message/consult?shop_id=' + that.pageData.store_id
                    });
                } else {
                    that.call();
                }
            },
            clickBtn(type, bool) {
                let that = this;
                that.specsFlag = bool ? 1 : 2;
                if (!that.vid) return (that.showModal = true);
                that.judgeBuyPower(type);
            },
            judgeBuyPower(type) {
                // 判断有无购买权限
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/judgmentBuyPower',
                        data: {
                            goods_id: that.goods_id,
                            shop_id: that.shop_id ? that.shop_id : uni.getStorageSync('shop_id')
                        }
                    })
                    .then((res) => {
                        if (res.code == 100) {
                            // 通过验证
                            if (that.pageData.bind == 0) return (that.showModal2 = true);
                            if (that.pageData.show_time == 1 && that.pageData.goods_state == 2) return that.$Toast('活动未开始哦');
                            if (that.pageData.show_time == 1 && that.pageData.goods_state == 0) return that.$Toast('活动已结束哦');
                            that.clickBtnType = type;
                            if (that.mode == 0 && that.specsFlag == 2) {
                                that.handleSubmit();
                                // that.showPopup = true;
                            } else {
                                that.handleSubmit();
                            }
                        }
                        if (res.code == 'jumpRoute' || (res.code == 'jumpUrl' && res.data != '')) {
                            that.showModal2 = true;
                            that.modalInfo = {
                                ...res,
                                jump: res.code
                            };
                        }
                    });
            },
            overlimit(type) {
                let that = this;
                if (type == 'plus') {
                    that.$Toast('该商品已达购买上限');
                }
            },
            handleSpecs(index, itmState, id) {
                // 类别索引,规格状态,规格id
                let that = this;
                if (!itmState) return; // 禁选
                if (that.specs_ids[index] == id) return; // 已选

                let { specsPrice } = that.pageData.getGoodsSpecs;
                that.specs_ids[index] = id; // 非响应式
                let empty = that.specs_ids.filter((item) => !item);

                if (!empty.length) {
                    // 已选完
                    let up = that.specs_ids.slice().sort((a, b) => a - b); // 创建副本再排序不影响原数组
                    let current = specsPrice.find((item) => item.specs_ids == up.toString());

                    if (current) {
                        that.specs_ids = [...that.specs_ids]; // 更新视图
                        that.stock = current.stock;
                        that.currentSpecs = current;
                        // 当前所选类别有无禁选规格，无则还原list
                        let result = that.specsList[index].list.find((item) => !item.state);
                        if (!result) that.specsList = JSON.parse(that.specsCopy);
                    } else {
                        // 没找到为undefined
                        that.specs_ids = that.specs_ids.map((item) => (item == id ? id : '')); // 只保留当前所选规格，其余类别规格id清空
                        // that.specs_ids[index] = ''
                        // that.specsList[index].list.forEach(item=>{
                        //     item.state = item.specs_id == id ? false : true
                        // })
                    }
                } else if (empty.length == 1) {
                    // 仅剩一个类别未选，需判断该类别有无禁选规格
                    that.specs_ids = [...that.specs_ids];
                    // 未选类别索引
                    let i = that.specs_ids.findIndex((item) => !item);
                    that.specsList[i].list.forEach((item) => {
                        let arr = JSON.parse(JSON.stringify(that.specs_ids));
                        arr[i] = item.specs_id; // 每一项规格组合
                        let result = specsPrice.find((itm) => itm.specs_ids == arr.sort((a, b) => a - b).toString());
                        item.state = result ? true : false;
                    });
                } else {
                    that.specs_ids = [...that.specs_ids];
                }
            },
            handleSubmit() {
                let that = this;
                let params = `?goods_id=${that.goods_id}&goods_num=${that.v_input}`;
                if (that.specsList.length) {
                    let empty = that.specs_ids.findIndex((item) => !item);
                    if (empty == -1) {
                        // 已选完
                        params = `${params}&specs_bind_id=${that.currentSpecs.id}&specs_bind_text=${that.currentSpecs.specs_title}`;
                        that.specs_title = that.currentSpecs.specs_title;
                    } else {
                        return that.$Toast('请选择规格');
                    }
                }
                if (that.v_input > that.stock) return that.$Toast('库存不足');

                if (that.clickBtnType == 1) {
                    // 立即购买
                    if (this.pageData.buy_config.state == 0) {
                        this.$common.Tel(this.pageData.buy_config.tel);
                    } else {
                        that.toUrl('/orderPage/order/createOrders' + params);
                    }
                } else if (that.clickBtnType == 2) {
                    // 一键开团
                    that.toUrl('/orderPage/order/createOrders' + params + '&open_group=1');
                } else if (that.clickBtnType == 3) {
                    // 加入购物车
                    that.$http
                        .post({
                            url: '/zzj_singleSaleApi/joinCart',
                            data: {
                                num: that.v_input,
                                specs_bind_id: that.currentSpecs.id || '',
                                specs_bind_text: that.currentSpecs.specs_title || '',
                                goods_id: that.goods_id,
                                tid: that.tid,
                                shop_id: that.shop_id ? that.shop_id : uni.getStorageSync('shop_id')
                            }
                        })
                        .then((res) => {
                            if (res.errcode != 100) return that.$Toast(res.msg);
                            that.getCart();
                            that.showPopup = false;
                            that.$Toast(`加入${that.cartName}成功`);
                            if (that.mode == 1 && !that.isHome) that.$back();
                            if (that.mode == 1 && that.isHome == 1) {
                                let path = that.scan == 1 ? '/otherPage/custom/placeOrder' : '/pages/classify/repast';
                                that.$rectTo(path);
                            }
                        });
                }
            }
        },
        onPageScroll(e) {
            let that = this;
            if (e.scrollTop > 100) {
                that.toTop = true;
                if (!that.showed) that.showed = true;
            } else {
                that.toTop = false;
            }
            if (e.scrollTop < that.view1Top) {
                that.currentTab = 0;
            }
            if (e.scrollTop >= that.view1Top) {
                that.currentTab = 1;
            }
            if (e.scrollTop >= that.view2Top) {
                that.currentTab = 2;
            }
            if (e.scrollTop >= that.view3Top && that.tabList.length > 3) {
                that.currentTab = 3;
            }
        },
        onShareAppMessage() {
            let that = this;
            that.$addShareNum('goods', that.goods_id, '1');
            return {
                title: that.pageData.goods_name,
                desc: that.pageData.goods_info,
                path: `/pages/index/index?share_v_id=${that.vid}&pageType=10&gid=${that.goods_id}`,
                imageUrl: that.$imgUrls(that.pageData.goods_img)
            };
        },
        onShareTimeline() {
            // 分享的是单页而非小程序，不经过首页
            this.$addShareNum('goods', this.goods_id, '2');
            return {
                title: this.pageData.goods_name,
                query: `share_v_id=${this.vid}&goods_id=${this.goods_id}&bid=${this.bid}&fromShare=1`,
                imageUrl: this.$imgUrls(this.pageData.goods_img)
            };
        }
    };
</script>

<style lang="scss" scoped>
    .currentSpecsimg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
    }
    .detailPage {
        padding-bottom: calc(var(--page-bot) + constant(safe-area-inset-bottom));
        padding-bottom: calc(var(--page-bot) + env(safe-area-inset-bottom));
    }

    .fcBtn {
        position: fixed;
        left: 20rpx;
        z-index: 20;
        width: 160rpx;
        height: 64rpx;
        border-radius: 64rpx;
        border: 1rpx solid #dadbde;
    }

    .topNav {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        opacity: 0;
        pointer-events: none; // 是否正常点击
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fade-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .showTopNav {
        animation: fade-in 1s forwards; // 保持最后一帧
        pointer-events: auto;
    }

    .hideTopNav {
        animation: fade-out 1s forwards;
        pointer-events: none;
    }

    .indicator-num {
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 200rpx;
        width: 100rpx;
    }

    .countDown {
        height: 100rpx;
        background: linear-gradient(45deg, #ffdfc9, #fff1e7, #ffb68e);

        .actName {
            width: 244rpx;
            height: 100%;
            background: linear-gradient(-45deg, #ff4e8c, #ff4b52, #ff9656);
            border-bottom-right-radius: 100rpx;
        }

        .stock {
            color: #fe3c5e;
        }

        .progress {
            width: 150rpx;
        }
    }

    .card {
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .recommend {
        .item {
            width: 200rpx;
            height: 360rpx;
            margin-right: 35rpx;

            &:nth-child(3n) {
                margin-right: 0;
            }

            .img {
                width: 200rpx;
                height: 200rpx;
            }
        }
    }

    .evaluate {
        .label {
            line-height: 48rpx;
            background: #ffecec;
            border-radius: 24rpx;
            padding: 0 15rpx;
        }

        .cont {
            height: 220rpx;

            .item {
                width: 500rpx;
                height: 220rpx;
                border: 2rpx solid #eeeeee;

                .img {
                    width: 220rpx;
                    height: 220rpx;
                }
            }
        }
    }

    .common_footer {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
        z-index: 10;
        border-top: 1rpx solid #dddddd;

        .list {
            width: 300rpx;
        }

        .loneBtn {
            width: 410rpx;
            line-height: 72rpx;
            border-radius: 72rpx;
        }

        .groupBtn {
            width: 410rpx;

            .left {
                border-radius: 68rpx 0 0 68rpx;
            }

            .right {
                border-radius: 0 68rpx 68rpx 0;
            }
        }
    }

    .specsPop {
        .img {
            width: 168rpx;
            height: 168rpx;
        }

        .specsItm {
            background: #f4f4f4;
            border: 2rpx solid #f4f4f4;
            padding: 8rpx 36rpx;

            &.active {
                background: #fff0f0;
                border: 2rpx solid #ff4b4e;
                color: #ff4b4e;
            }
        }

        .confirmBtn {
            margin-bottom: constant(safe-area-inset-bottom);
            margin-bottom: env(safe-area-inset-bottom);
            width: 100%;
            line-height: 80rpx;
            border-radius: 80rpx;
        }

        .btn {
            margin-bottom: constant(safe-area-inset-bottom);
            margin-bottom: env(safe-area-inset-bottom);
            width: 48%;
            height: 72rpx;
            border-radius: 36rpx;
        }
    }

    // 点餐
    .package {
        .item {
            width: 100%;
            height: 230rpx;

            .img {
                width: 190rpx;
                height: 190rpx;
            }
        }
    }

    .order_footer {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
        z-index: 10;
        border-top: 1rpx solid #dddddd;

        .btn {
            width: 300rpx;
            height: 72rpx;
            border-radius: 36rpx;
        }
    }

    .specsTag {
        min-width: 144rpx;
        line-height: 54rpx;
        padding: 0 10rpx;
        background: #f4f4f4;
        border: 2rpx solid #f4f4f4;

        &.active {
            background: #fff0f0;
            border: 2rpx solid #ff4b4e;
            color: #ff4b4e;
        }
    }

    .detailStore {
        padding: 0 20rpx;
        margin-bottom: 20rpx;
    }

    .test {
        padding: 10rpx 12rpx;
        background: #62d14f;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: white;
    }
</style>
